<template>
<div id="app">
    <common-head></common-head>
    <div class="swiper">
        <swipe-lunbo :id="id"></swipe-lunbo>
    </div>
    <div class="goodInfo" v-for="(item,index) in goodsInfo" :key="index">
        <div class="goods-title" >{{item.title}}</div>

        <p>市场价：<span class="makep">{{item.market_price}}</span> 销售价：<span class="selp">{{item.sell_price}}</span></p>
        <div class="count">
            <span>购买数量</span>
           <van-stepper v-model="value" />
        </div>
        <div class="btns">
            <van-button type="info" size="mini" @click="shopNow">立即购买</van-button>
            <van-button type="danger" size="mini" @click="addShowCar({id:item.id,num:value,price:item.sell_price})">加入购物车</van-button>
        </div>
    </div>
    <div class="goodParams"  v-for="item in goodsInfo" :key="item.id">
        <div class="title">商品参数</div>
        <div class="body">
            <p>商品货号：{{item.goods_no}}</p>
            <p>商品情况：{{item.stock_quantity}}件</p>
            <p>上架时间：{{item.add_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>
        <div class="btns">
            <van-button plain type="info"  block @click="picIntroduce(item.id)">图片介绍</van-button>
            <van-button plain type="danger"  block @click="comment(item.id)">商品评论</van-button>
        </div>
    </div>
     <common-footer></common-footer>
</div>
</template>
<script>
import Swipe from './Swipe'
import { mapState, mapMutations } from 'vuex'
export default {
  props: ['id'],
  data () {
    return {
      value: '1',
      goodsDetailList: [],
      goodsInfo: []
    }
  },
  components: {

    // eslint-disable-next-line vue/no-unused-components
    'swipe-lunbo': Swipe
  },
  mounted () {

  },
  computed: {
    ...mapState(['goodNum'])
  },
  created () {
    // this.getImageText()
    this.getGoodsInfo(this.id)
  },
  methods: {
    ...mapMutations(['addGoodNum']),
    // 获取商品标题参数，价格，参数
    async getGoodsInfo (id) {
      const { data: res } = await this.$http.get('/api/goods/getinfo/' + id)
      this.goodsInfo = res.message
    },
    //    获取图文介绍
    async picIntroduce (id) {
      this.$router.push('/imageText/' + id)
      const { data: res } = await this.$http.get('/api/goods/getdesc/' + id)
      this.goodsDetailList = res.message
    },
    // 加入购物车
    addShowCar (params) {
      console.log('params', params)
      this.addGoodNum(params)
      this.$toast('添加成功')
      // this.$router.push('/price')
    },
    // 评论模块
    comment (id) {
      // this.$router.push('/review/' + id)
      this.$router.push('/goodscomment')
    },
    shopNow () {
      this.$router.push('/price')
    }
  }
}
</script>
<style lang="less" scoped>

.swiper{
    margin: 5px;
    margin-top: 50px;
    padding: 10px;
    height: 220px;
    border: 1px solid #ccc;
    border-radius: 3px
}
.goodInfo{
    margin: 5px;
    padding: 10px;
    margin-top: 10px;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #ccc

}
.goods-title{
        border-bottom: 1px solid #ccc;
    }
p{
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
}

.makep{
    text-decoration: line-through;
    margin: 0 10px
}
.selp{
    font-weight: 700;
    font-size: 16px;
    color: red;
    font-style: normal
}
.count{
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
}
.count span{
    font-size: 14px;
    color: #8f8f94;
}
.van-stepper{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.goodParams{
    margin: 5px;
   padding: 10px;
   margin-top: 10px;
   padding: 15px;
   border-radius: 3px;
   border: 1px solid #ccc
}
.goodParams .title{
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc
}
.body{
    border-bottom: 1px solid #ccc;
    padding: 15px;
}
.goodParams .btns{
    margin-top: 10px
}
.goodParams .btns .van-button{
    border-radius: 5px;
    margin: 5px 0;

}
.goodParams .btns{
 margin-bottom: 50px;
}
</style>
